<template>

  <div>
    <!--详情页面弹窗-->
    <el-dialog title="详情" :visible.sync="dialogFormVisible" width="1000px">
      <el-form label-width="80px" :inline="true">
        <!-- 查询条件 -->
        <el-form-item label="资产编码">
          <el-input v-model="searchMap.assetCode" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="资产名称">
          <el-input v-model="searchMap.assetName" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="规格型号">
          <el-input v-model="searchMap.assetModel" placeholder=""></el-input>
        </el-form-item>
        <div style="margin: 0 auto; width: fit-content;">
          <el-button type="primary" @click="getDetail(searchMap.assetReportNum)">查询</el-button>
          <el-button type="primary" @click="reset()">重置</el-button>
        </div>
      </el-form>
      <!-- 表格 -->
      <el-table @selection-change="handleSelectionChange" ref="multipleTable" :data="detailList" border
        style="width: 100%"  :row-key="getRowKey">
        <!-- 设置是否保留选择 -->
        <el-table-column  type="selection" fixed width="50" :reserve-selection="true">
        </el-table-column>
        <!-- 序号列 -->
        <el-table-column fixed prop="id" label="序号" width="50">
        </el-table-column>

        <el-table-column prop="number" label="资产编码">
        </el-table-column>
        <el-table-column prop="assetName" label="资产名称">
        </el-table-column>
        <el-table-column prop="model" label="规格型号">
        </el-table-column>
        <el-table-column prop="assetCategoryName" label="资产分类">
        </el-table-column>
        <el-table-column prop="unit" label="单位">
        </el-table-column>
        <el-table-column prop="adminName" label="管理人">
        </el-table-column>
        <el-table-column prop="userName" label="使用人">
        </el-table-column>
        <el-table-column prop="nowStorageLocationName" label="存放地点">
        </el-table-column>
        <el-table-column prop="assetStatus" label="状态">
          <template slot-scope="scope">
            {{ getAssetStatusText(scope.row.assetStatus) }}
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <el-pagination @size-change="detailSizeData" @current-change="detailPageData"
        :page-sizes="[1, 10, 20, 30, 50, 100]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
        :total="detailCount">
      </el-pagination>
      <div style="margin: 0 auto; width: fit-content;">
        <el-button type="primary" @click="batchAdd(items)">保存</el-button>
      </div>

    </el-dialog>
  </div>
</template>
<script>
import assetReportService from "@/api/asset-report";
export default {
  watch: {
    selectedItems: {
      immediate: true,
      handler(newVal) {
        this.$nextTick(() => {
          if (this.$refs.multipleTable) {
            newVal.forEach(item => {
              this.$refs.multipleTable.toggleRowSelection(item, true);
            });
          }
        });
      }
    }
  }, 
  ids: [],
  items: [],
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false
    },
    searchMap: {
      type: Object,
      default: () => ({ })
    },
    detailList: {
      type: Array,
      default: () => []
    },
    detailCount: {
      type: Number,
      default: 0
    }
  },
  methods: {
      getRowKey(row) {
    return row.id;
  },
    getAssetStatusText(status) {
      // 根据状态返回按钮文本
      switch (status) {
        case 1:
          return '使用';
        case 2:
          return '闲置';
        case 3:
          return '借用';
        case 4:
          return '调拨';
        default:
          return '未知状态';
      }
    },
    getDetail(assetReportNum) {
      this.searchMap.assetReportNum = assetReportNum;
      assetReportService.findDetail(this.searchMap).then(response => {
        this.detailList = response.data;
        this.detailCount = response.count;
        this.dialogFormVisible = true;
      });
    },
    reset() {
      if (this.searchMap.assetReportNum === '') {
        this.searchMap = {};
      } else {
        this.searchMap = {
          assetReportNum: this.searchMap.assetReportNum
        };
      }
    },
    detailSizeData(size) {
      this.searchMap.limit = size
      this.getDetail(this.searchMap.assetReportNum)
    },
    detailPageData(page) {
      this.searchMap.page = page
      this.getDetail(this.searchMap.assetReportNum)
    },
    handleSelectionChange(val) {
      // val 是所有选中行的数组
      this.items = val; // 直接将选中的行赋值给 this.items
      this.ids = val.map(item => item.id );
    },
    batchAdd() {
      // 触发 'batchAdd' 事件，并将 items 作为参数传递
      this.$emit('batchAdd', this.items);
      this.dialogFormVisible = false;
    }
    
  }
}
</script>
